<template>
  <view class="conter">
    <top-tabbar tabTitle="活动详情" v-if="paryData.platform" :class="!titleStatus ? 'titleStatus' : ''" :titleStatus="titleStatus"  @click="backClick"></top-tabbar>
    <view style="height: 180rpx;" v-if="paryData.platform && !$wechat.isWechat()"></view>
    <view class="actici-img">
      <image mode="widthFix" @load="loadImg" src="https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/curriculum/activityPages.png"></image>
    </view>
    <!-- 系统学习 -->
    <view class="Systematic-learning" v-if="toLoadState">
      <view class="syste-title">相似推荐</view>
      <view class="lear-img-name" @click="bannerClick('/pages/home/iossystem?platform='+fromPary.platform+'&phonenumber='+fromPary.phone)">
        <view class="lear-img">
          <image class="imgs" :src="paryData.logoImageUrl"></image>
         <view class="system-log">
            <image src="https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/system_log.png">
            </image>
            <view class="system_name">年课</view>
          </view>
        </view>
        <view style="width: 256rpx; height: 240rpx;"></view>
        <view class="name-btn">
          <view class="btn-p1">年课</view>
          <view class="name">{{ paryData.name }}</view>
          <view class="price-btn">
            <view class="price">￥{{ paryData.price }}</view>
            <view class="primary btn-zoom"  @click="bannerClick">立即购买</view>
          </view>
        </view>
      </view>
    </view>
   <view class="app-name">大爆炸思维</view>
  </view>
</template>

<script>
  import { squeezePage } from '@/utils/api.js'
  import topTabbar from '@/components/topTabbar/index.vue'
  export default {
  	data() {
  		return {
        toLoadState: false,
        paryData:{
          name:'',
          skuId: '4a77c1fd-bf3f-a9ab-365d-3a022c667994', // 1668年课
          logoImageUrl:'',
          price:'',
          title:'',
          platform: ''
        },
        titleStatus: true
      }
    },
    components: { topTabbar },
    onLoad(params) {
      const vm = this
      vm.getDetail()
      if(params.platform) {
        vm.paryData.platform = params.platform
      }
       vm.$wechat.unseBehavior()
    },
    onPageScroll(e){
      const vm = this
      if(e.scrollTop > 10) {
        vm.titleStatus = false
      }
      if(e.scrollTop < 10) {
        vm.titleStatus = true
      }
    },
    methods:{
      // 图片加载成功
      loadImg(e) {
        const vm = this
        if(e.detail.height){
          vm.toLoadState = true
        }
      },
      // 返回上一页
      backClick() {
        uni.navigateBack({
          delta: 1
        })
      },
      // 获取详情
      async getDetail() {
        const vm = this
        const res = await squeezePage(vm.paryData.skuId)
        vm.paryData.name = res.name
        vm.paryData.logoImageUrl = res.logoImageUrl
        vm.paryData.price = res.price
        vm.paryData.title = res.name
      },
      // 跳年课
      bannerClick() {
        const vm = this
        uni.navigateTo({
          url: '/pages/product/detail?skuid='+ vm.paryData.skuId
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .conter{
    .actici-img{
      width: 100%;
      display: block;
    }
    .titleStatus{
      background: rgba(0,0,0,0.3)!important;
    }
    /deep/ .top-tabbar-wrap{
      width: 100%;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 10;
      background: #FFFFFF;
    }
    .Systematic-learning {
      margin-top: 48rpx;
    
      .syste-title {
        color: #262626;
        font-weight: 500;
        font-size: 32rpx;
        padding: 0 40rpx;
        padding-bottom: 56rpx;
      }
    
      .lear-img-name {
        width: 670rpx;
        margin: auto;
        background: #FFFFFF;
        box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.08);
        border-radius: 30rpx;
        display: flex;
        position: relative;
    
        .lear-img {
          width: 256rpx;
          height: 272rpx;
          position: absolute;
          bottom: 0rpx;
          left: 0;
    
          .imgs {
            width: 100%;
            height: 100%;
            border-radius: 30rpx;
          }
    
          .system-log {
            width: 120rpx;
            height: 40rpx;
            position: absolute;
            top: -12rpx;
            left: 0;
    
            .system_name {
              font-size: 24rpx;
              color: #FFFFFF;
              position: absolute;
              top: 2rpx;
              left: 18rpx;
            }
          }
        }
    
        .name-btn {
          width: 384rpx;
          padding: 32rpx 16rpx 16rpx 24rpx;
    
          .btn-p1 {
            display: inline;
            padding: 6rpx 36rpx;
            background: #FFD8B5;
            border-radius: 22rpx;
            font-size: 24rpx;
            color: #FF800C;
          }
    
          .name {
            font-weight: 500;
            font-size: 32rpx;
            color: #262626;
            margin: 16rpx 0 40rpx 0;
          }
    
          .price-btn {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
    
            .price {
              color: #FF800C;
              font-weight: bold;
              font-size: 40rpx;
            }
    
            .primary {
              width: 160rpx;
              height: 48rpx;
              line-height: 48rpx;
              background: #FF800C;
              text-align: center;
              color: #FFFFFF;
              font-size: 24rpx;
              border-radius: 24rpx;
            }
          }
        }
      }
    }
    .app-name {
      color: #EEEEEE;
      font-weight: bold;
      font-size: 36rpx;
      padding: 30rpx 0;
      text-align: center;
    }
  }
</style>

